@import "./common";

body {

    .container {
        width : vw(576);
        height: 100%;
        margin: 0 auto;

        header {
            overflow: hidden;

            .logo {
                width : vw(221);
                height: vw(194);
                margin: vw(105) auto 0;

                img {
                    display: block;
                    width  : 100%;
                    height : 100%;
                }
            }
        }

        section {
            position: relative;

            form {
                margin-top: vw(140);

                .ipt {
                    position     : relative;
                    width        : vw(576);
                    height       : vw(76);
                    line-height  : vw(76);
                    margin-bottom: vw(50);

                    input {
                        display         : inline-block;
                        width           : 100%;
                        height          : 100%;
                        border          : vw(1) transparent;
                        padding-left    : vw(41);
                        border-radius   : vw(38);
                        background-color: rgba(255, 255, 255, 0.3);
                    }

                    small {
                        color      : red;
                        font-weight: bolder;
                        position   : absolute;
                        bottom     : vw(-60);
                        left       : 0;
                        visibility : hidden;
                    }

                    &.error input {
                        border-color: red;
                    }

                    &.success input {
                        border-color: green;
                    }

                    &.error small {
                        visibility: visible;
                    }
                }

                .btn {
                    padding-top    : vw(27);
                    display        : flex;
                    justify-content: space-between;

                    button {
                        width           : vw(245);
                        height          : vw(76);
                        background-color: #ffffff;
                        opacity         : 0.8;
                        box-shadow      : 0 vw(4) vw(4) vw(1) rgba(0, 0, 0, 0.39);
                        border-radius   : vw(38);
                        font-size       : vw(28);
                        font-weight     : normal;
                        font-stretch    : normal;
                        line-height     : vw(18);
                        letter-spacing  : 0;
                        color           : #0075c1;
                    }
                }
            }

            .last-error {
                position        : absolute;
                top             : 0;
                left            : vw(68);
                width           : vw(440);
                height          : vw(150);
                background-color: red;
                padding         : vw(30);
                color           : #fff;
                border-radius   : vw(20);
                transform       : scale(0);
                transition      : all 0.5s;
            }
        }
    }
}